<style lang="less">
@import '../../assets/style/logo.less';
</style>

<template>
<div class="login" @keydown.enter="handleSubmit">
	<van-row>
		<van-col span="24" class="text">ETCLDCS</van-col>
		<van-col span="20" offset="2" class="van-hairline--surround">
			<van-cell-group>
				<van-field v-model="username" placeholder="请输入账号" type="text" @blur="getUserName">
					<i slot="left-icon" style="display:inline-block;margin-right: 10px;">
						<img :src="iconAdm" alt="" style="width:15px;">
					</i>
				</van-field>
				<van-field v-model="password" placeholder="请输入密码" type="password" @blur="getPassWord">
					<i slot="left-icon"  style="display:inline-block;margin-right: 10px;">
						<img :src="iconPwd" alt=""  style="width:15px;">
					</i>
				</van-field>
			</van-cell-group>
		</van-col>
		<van-col span="22" offset="2" class="chk">
			<van-checkbox v-model="checked" @change="remberPwd">
				记住账号
				<img slot="icon" slot-scope="props" :src="checked ? icon.active : icon.normal">
			</van-checkbox>
		</van-col>
		<van-col span="20" offset="2">
			<van-button type="primary" size="large" @click="handleSubmit">登录</van-button>
		</van-col>
	</van-row>
</div>
</template>

<script>
import {
	Row,
	Col,
	CellGroup,
	Field,
	Icon,
	Checkbox,
	CheckboxGroup,
	Button,
	Dialog,
	Toast
} from 'vant'

import { mapActions } from 'vuex'
import { callData } from '../../axios/axios'
import { setSession, getSession } from '../../libs/cache'
import { addHeaders, removeHeaders, startLocationService, saveLocalStorage, getLocalStorage, deleteLocalStorage,getLocation } from '../../api/android'
/* 引入图标 */
import normalImg from '../../assets/img/login/icon_chk01.png'
import activeImg from '../../assets/img/login/icon_chk02.png'
import IconAdm from '../../assets/img/login/icon_adm.png'
import IconPwd from '../../assets/img/login/icon_pwd.png'
export default {
	components: {
		[Row.name]: Row,
		[Col.name]: Col,
		[Field.name]: Field,
		[CellGroup.name]: CellGroup,
		[Icon.name]: Icon,
		[Checkbox.name]: Checkbox,
		[CheckboxGroup.name]: CheckboxGroup,
		[Button.name]: Button,
		[Dialog.name]: Dialog
	},
	data() {
		return {
			username: '',
			password: '',
			checked: false,
			andriod: false,
			toastMeg:'正在为您登录',
			icon: {
				normal: normalImg,
				active: activeImg
			},
			iconAdm: IconAdm,
			iconPwd: IconPwd
		}
    },
	methods: {
		...mapActions([
            'userLoginIn'
		]),
		// 记住密码
		remberPwd(val){
			this.checked = val
			if(this.andriod) return
			if(val){
				Toast({
					message:'记住密码成功，下次进入将免输入用户名和密码，同时请确保是在本人的手机上操作！',
					position: "bottom"
				})
			}else{
				Toast({
					message:'取消记住密码成功，系统将不再为您记住密码！',
					position: "bottom"
				})
			}
		},
		// 用户名
		getUserName(key){
			this.username = key.target.value
		},
		// 密码
		getPassWord(key){
			this.password = key.target.value
		},
		// 点击登录
		handleSubmit() {
			if(!this.username || !this.password){
				let meg = ''
				if(!this.username && !this.password) meg = '请输入您的用户名和密码'
				else if(!this.username)  meg = '请输入您的用户名'
				else	 meg = '请输入您的密码'
				Dialog.alert({
					message: meg
				}).then(() => {})
				return
			}
			let _this = this,
				params = {
					username: this.username,
					password: this.password,
					grant_type: 'password',
					scope: 'all',
					client_id: 'hnapp',
					client_secret: 'hnapp'	
				};
			if(window.Cordova){
				callData('/auth/oauth/token', 'post', params).then(res => {
					if(res.token_type && res.access_token){
						let save = {}
							save.key = "userMeg"
						if(this.checked){
							save.data = {
								username: this.username,
								password: this.password
							}
							saveLocalStorage(save)
						}else{
							deleteLocalStorage(save)
						}
						
						let token = res.token_type + " " + res.access_token
						let saveKey = {
							key: 'token',
							data: token
						}
						setSession('token',token);
						saveLocalStorage(saveKey);
						_this.routerPush(token);
                    }
				})
			}else{
				this.userLoginIn(params).then(res => {
					if(res.token_type && res.access_token){
						Toast.clear()						
						_this.$router.push({
							name: 'index'
						})
					}
				})
			}
		},
		// 安卓清除请求头
		clearHeaders(){
			let _this = this
			if(window.Cordova){
				removeHeaders()
				let get = {}
					get.key = "userMeg";
				getLocalStorage(get,res => {
					if(res.success){
						if(res.data && res.data.data){
							let data = JSON.parse(res.data.data)
							if(data.username && data.password){
								_this.checked = true
								_this.andriod = true
								_this.username = data.username
								_this.password = data.password
							}
						}
					}
				})
			}
		},
		// 获取当前的位置信息
	    	getAddress(){
	    		if(window.Cordova){
	    			getLocation(res => {
	    				const jdwdMeg = {
	    					lon:res.data.lon, // 经度
			            	lat:res.data.lat // 纬度
	    				}
	    				setSession('jdwdMeg', jdwdMeg);
	    			})
	    		}
		},
		// 缓存等跳转的问题
		routerPush(token){
			let _this = this
			let toast = Toast.loading({
					mask: true,
					duration: 0,
					message: _this.toastMeg
				})
			addHeaders(token,res => {
				if(res.success){
					startLocationService(60,start => {
						_this.getAddress();
						toast.message="正在为您登录"
						Toast.clear()
						_this.$router.push({
							name: 'index'
						})
					})
				}
			})
		},
	    	// 自动登录
	    	autoLogin(){
	    		let _this = this
	    		if(window.Cordova && !getSession("token")){
				let getKey = {key: "token"};
				getLocalStorage(getKey,res=>{
					let token = res.data.data;
					setSession('token',token)
					_this.routerPush(token)
				})
			}else if(getSession("token")){
				alert(333)
			}
	    	}
	},
	mounted () {
		this.clearHeaders();
		this.autoLogin();
	}
}
</script>
